<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>预约列表</title>
		<script src="js/vue.global.js"></script>
		<script src="js/element-plus.full.js"></script>
		<script src="js/element-plus-icons-vue.iife.min.js"></script>
		<link rel="stylesheet" href="css/element-plus-index.css" />
		<link rel="stylesheet" href="css/main.css" />
	</head>
	<body scroll="no">
		<div id="app">
					<!-- 面包屑 -->
					<el-breadcrumb separator="/">
						<el-breadcrumb-item>预约</el-breadcrumb-item>
						<el-breadcrumb-item>预约列表</el-breadcrumb-item>
					</el-breadcrumb>
					<!-- 搜索条 -->
					<div style="margin-top: 20px;">
						<el-descriptions class="margin-top" title="体检客户查询" :column="3" :size="size" border>
							<template #extra>
								<el-button type="primary">查询</el-button>
							</template>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										手机号
									</div>
								</template>
								<el-input v-model="address" placeholder="输入搜索的手机号" />
							</el-descriptions-item>
		
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										姓名
									</div>
								</template>
								<el-input v-model="address" placeholder="输入预约体检的客户信息" />
							</el-descriptions-item>
		
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										性别
									</div>
								</template>
								<el-select v-model="options.value" class="m-2" placeholder="选择性别">
									<el-option v-for="item in options" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-descriptions-item>
		
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										预约院区
									</div>
								</template>
								<el-select v-model="yuanqu.value" class="m-2" placeholder="选择院区地址">
									<el-option v-for="item in yuanqu" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-descriptions-item>
		
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										套餐类型
									</div>
								</template>
								<el-select v-model="yuyuetaocao.value" class="m-2" placeholder="预约套餐">
									<el-option v-for="item in yuyuetaocao" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-descriptions-item>
		
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										体检时间
									</div>
								</template>
								<el-date-picker v-model="yuyuedate" type="date" placeholder="Pick a day" :size="size" />
							</el-descriptions-item>
		
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										是否归档
									</div>
								</template>
								<el-radio-group v-model="radio2" class="ml-4">
									<el-radio label="1">未归档</el-radio>
									<el-radio label="2">已归档</el-radio>
								</el-radio-group>
							</el-descriptions-item>
						</el-descriptions>
					</div>
					<!-- 查询列表显示 -->
		
					<div style="margin-top: 20px;">
						<h4>预约客户查询列表</h4>
						<el-table :data="yuyuelist" style="width: 100%" stripe>
							<el-table-column label="订单编号" prop="ids" width="180" align="center"></el-table-column>
							<el-table-column label="客户姓名" prop="name" width="120" align="center"></el-table-column>
							<el-table-column label="客户手机号" prop="phone" width="180" align="center"></el-table-column>
							<el-table-column label="预约院区" prop="address" width="180" align="center"></el-table-column>
							<el-table-column label="预约套餐" prop="taocan" width="240" align="center"></el-table-column>
							<el-table-column label="预约时间" prop="yuyuedate" width="140" align="center"></el-table-column>
							<el-table-column label="是否归档" prop="guidang" width="120" align="center"></el-table-column>
							<el-table-column label="操作" width="260" align="center">
								<template #default>
									<el-button>取消预约</el-button>
									<!--当单击编辑按钮的时候，调用edit这个函数-->
									<el-button @click="edit">编辑</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="page">
							<el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
						</div>
					</div>
				</div>
	</body>
	<script>
			const App = {
				data() {
					return {
						//性别
						options: [{
								value: 'boy',
								label: '男士',
							},
							{
								value: 'women',
								label: '已婚女士',
							},
							{
								value: 'girl',
								label: '未婚女士',
							}
						],
						//预约院区
						yuanqu: [{
								value: 'hunnan',
								label: '沈阳熙康云医院-浑南院区'
							},
							{
								value: 'sanhao',
								label: '沈阳熙康云医院-三好街院区'
							},
							{
								value: 'shijidasha',
								label: '沈阳熙康云医院-世纪大厦'
							},
						],
						//预约套餐
						yuyuetaocao: [{
								value: 'taocanA',
								label: '23东软家属已婚女士套餐A'
							},
							{
								value: 'taocanB',
								label: '23东软家属已婚女士套餐B'
							},
							{
								value: 'taocanC',
								label: '23东软家属已婚女士套餐C'
							},
							{
								value: 'taocanD',
								label: '23东软家属已婚女士套餐D'
							}
						],
						yuyuedate: '', //预约时间
						radio2: '1', //是否归档
						//表单数据
						yuyuelist: [{
								"ids": "2023100256211023",
								"name": "张一山",
								"phone": "13100000000",
								"address": "熙康云医院-浑南院区",
								"taocan": "23东软家属已婚女士套餐C",
								"yuyuedate": "2015-02-12",
								"guidang": "已归档"
							},
							{
								"ids": "2023100256211023",
								"name": "张一山",
								"phone": "13100000000",
								"address": "熙康云医院-浑南院区",
								"taocan": "23东软家属已婚女士套餐C",
								"yuyuedate": "2015-02-12",
								"guidang": "已归档"
							},
							{
								"ids": "2023100256211023",
								"name": "张一山",
								"phone": "13100000000",
								"address": "熙康云医院-浑南院区",
								"taocan": "23东软家属已婚女士套餐C",
								"yuyuedate": "2015-02-12",
								"guidang": "已归档"
							},
							{
								"ids": "2023100256211023",
								"name": "张一山",
								"phone": "13100000000",
								"address": "熙康云医院-浑南院区",
								"taocan": "23东软家属已婚女士套餐C",
								"yuyuedate": "2015-02-12",
								"guidang": "已归档"
							},
							{
								"ids": "2023100256211023",
								"name": "张一山",
								"phone": "13100000000",
								"address": "熙康云医院-浑南院区",
								"taocan": "23东软家属已婚女士套餐C",
								"yuyuedate": "2015-02-12",
								"guidang": "已归档"
							},
							{
								"ids": "2023100256211023",
								"name": "张一山",
								"phone": "13100000000",
								"address": "熙康云医院-浑南院区",
								"taocan": "23东软家属已婚女士套餐C",
								"yuyuedate": "2015-02-12",
								"guidang": "已归档"
							},
							{
								"ids": "2023100256211023",
								"name": "张一山",
								"phone": "13100000000",
								"address": "熙康云医院-浑南院区",
								"taocan": "23东软家属已婚女士套餐C",
								"yuyuedate": "2015-02-12",
								"guidang": "已归档"
							}
						]
					}
				},
				methods: {}
			};
			const app = Vue.createApp(App);
			app.use(ElementPlus);
			app.mount("#app");
		</script>
</html>